<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>监视属性</title>
</head>
<body>
<div id="app">
<!--  现在有一个需求，页面需要自动监测当前的天气状况，当天气状况为炎热时，系统需要在页面弹出提示，提醒人员做好相应的防暑措施-->
  <p>今天天气很{{isHot?"炎热":"清凉"}}</p>
  <button @click="isHot=!isHot">切换天气</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el:"#app",
    data(){
      return{
        isHot:false
      }
    },
    //这中写法比较适合需要监视的属性非常清晰，一开始就明确要监视哪些属性的场景
    watch:{
      isHot: {
        //监视属性的回调函数是否立即执行
        immediate:true,
        //handler什么时候被调用，只有当我们监视的属性发生变化时，handler才会被调用
        handler(newValue,oldValue){
          console.log("isHot监视属性的handler被调用了")
          if (newValue){
            window.alert("天气炎热，请做好相应的防暑错误，严格控制户外作业时间")
          }
        }
      },
    }
  })
  //第二种方式则比较适合后期需求需要监视的属性的写法
  //注意这里的属性需要带引号“”，不带引号的话就是读取属性，带引号则表示为改属性的键
  // vm.$watch("isHot",{
  //   immediate:true,
  //   handler(newValue,oldValue){
  //     console.log("isHot监视属性的handler被调用了")
  //           if (newValue){
  //             window.alert("天气炎热，请做好相应的防暑错误，严格控制户外作业时间")
  //           }
  //   }
  // })
</script>
</body>
</html>
